import { UserConfig, ConfigEnv, loadEnv, defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// 导入tailwindcss
import tailwindcss from "tailwindcss";
import autoprefixer from "autoprefixer";
// 导入postcss
//import postcss from "postcss";

// 自动导入
import AutoImport from "unplugin-auto-import/vite";
// 按需加载自定义组件
import Components from "unplugin-vue-components/vite";
// 引入elmentPlus相关函数
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

// 自动elementPlus导入图标
import Icons from "unplugin-icons/vite";
import IconsResolver from "unplugin-icons/resolver";

// 引入svg
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";

// 引入jsx
import vueJsx from "@vitejs/plugin-vue-jsx";

// 查看引用关系
import Inspect from "vite-plugin-inspect";

// 打包分析
import { visualizer } from "rollup-plugin-visualizer";

// 文件压缩
import viteCompression from "vite-plugin-compression";

// 压缩图片
import viteImagemin from "vite-plugin-imagemin";

// 引入elementplus 的相关css，加快首屏优化
import fs from "fs";

import { resolve } from "path";
const pathSrc = resolve(__dirname, "src");

import {
  name,
  version,
  engines,
  dependencies,
  devDependencies,
} from "./package.json";

/** 平台的名称、版本、运行所需的`node`版本、依赖、构建时间的类型提示 */
const __APP_INFO__ = {
  pkg: { name, version, engines, dependencies, devDependencies },
  buildTimestamp: Date.now(),
};

// https://vitejs.dev/config/
export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
  const env = loadEnv(mode, process.cwd());
  console.log("env", env);

  const optimizeDepsElementPlusIncludes = ["element-plus/es"];
  fs.readdirSync("node_modules/element-plus/es/components").map((dirname) => {
    fs.access(
      `node_modules/element-plus/es/components/${dirname}/style/css.mjs`,
      (err) => {
        if (!err) {
          optimizeDepsElementPlusIncludes.push(
            `element-plus/es/components/${dirname}/style/css`
          );
        }
      }
    );
  });

  return {
    resolve: {
      alias: {
        "@": pathSrc,
      },
    },

    plugins: [
      vue(), // 自动导入依赖包
      vueJsx(), // jsx、tsx语法支持
      AutoImport({
        // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
        imports: ["vue", "@vueuse/core", "pinia", "vue-router"],
        resolvers: [
          // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
          ElementPlusResolver(),
          IconsResolver({ prefix: "Icon" }), // 自动导入图标组件
        ],
        // 指定自动导入函数TS类型声明文件路径 (false:关闭自动生成)
        // dts: false,
        dts: "src/typings/auto-imports.d.ts",
        // 是否在 vue 模板中自动导入
        vueTemplate: true,
        eslintrc: {
          // 是否生成 eslint 规则 (false:关闭自动生成) 参考：https://blog.csdn.net/webbirds/article/details/127283504
          enabled: false,
          // 生成规则文件路径
          filepath: "./.eslintrc-auto-import.json",
        },
      }),
      // 按需加载组件
      Components({
        deep: true, // 搜索子目录
        // 指定自定义组件位置(默认:src/components) views 里面自定的组件
        dirs: ["src/components", "src/**/components", "src/**/**/*"],
        resolvers: [
          // 自动导入 Element Plus 组件
          ElementPlusResolver(),
          // 自动注册图标组件
          IconsResolver({
            // element-plus图标库，其他图标库 https://icon-sets.iconify.design/
            enabledCollections: ["ep"],
          }),
        ],
        // 指定自动导入组件TS类型声明文件路径 (false:关闭自动生成)
        // dts: false,
        dts: "src/typings/components.d.ts",
      }),
      Icons({
        // 自动安装图标库
        autoInstall: true,
      }),
      createSvgIconsPlugin({
        // 指定需要缓存的图标文件夹
        iconDirs: [resolve(pathSrc, "assets/icons")],
        // 指定symbolId格式
        symbolId: "icon-[dir]-[name]",
      }),

      // 查看引用关系
      Inspect(),
      visualizer({ open: true }),
      // 预加载项目必需的组件
    ],
    // 配置全局css
    css: {
      preprocessorOptions: {
        postcss: {
          plugins: [tailwindcss, autoprefixer],
        },
        scss: {
          // 配置全局scss变量
          additionalData: ` @use "@/styles/utils.scss" as *;`,
        },
      },
    },
    server: {
      // 允许IP访问
      host: "0.0.0.0",
      // 应用端口 (默认:8001)
      port: Number(env.VITE_APP_PORT),
      // 运行是否自动打开浏览器
      open: true,
      proxy: {
        // /** 代理前缀为 /dev-api 的请求  */
        // [env.VITE_APP_BASE_API]: {
        //   changeOrigin: true,
        //   // 接口地址
        //   target: env.VITE_APP_API_URL,
        //   rewrite: (path) =>
        //     path.replace(new RegExp("^" + env.VITE_APP_BASE_API), ""),
        // },
      },
    },
    build: {
      chunkSizeWarningLimit: 2000, // 消除打包大小超过500kb警告
      minify: "terser", // Vite 2.6.x 以上需要配置 minify: "terser", terserOptions 才能生效
      terserOptions: {
        compress: {
          keep_infinity: true, // 防止 Infinity 被压缩成 1/0，这可能会导致 Chrome 上的性能问题
          drop_console: true, // 生产环境去除 console
          drop_debugger: true, // 生产环境去除 debugger
        },
        format: {
          comments: false, // 删除注释
        },
      },
      rollupOptions: {
        output: {
          // manualChunks: {
          //   "vue-i18n": ["vue-i18n"],
          // },
          // 用于从入口点创建的块的打包输出格式[name]表示文件名,[hash]表示该文件内容hash值
          entryFileNames: "js/[name].[hash].js",
          // 用于命名代码拆分时创建的共享块的输出命名
          chunkFileNames: "js/[name].[hash].js",
          // 用于输出静态资源的命名，[ext]表示文件扩展名
          assetFileNames: (assetInfo: any) => {
            const info = assetInfo.name.split(".");
            let extType = info[info.length - 1];
            // console.log('文件信息', assetInfo.name)
            if (
              /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/i.test(assetInfo.name)
            ) {
              extType = "media";
            } else if (/\.(png|jpe?g|gif|svg)(\?.*)?$/.test(assetInfo.name)) {
              extType = "img";
            } else if (/\.(woff2?|eot|ttf|otf)(\?.*)?$/i.test(assetInfo.name)) {
              extType = "fonts";
            }
            return `${extType}/[name].[hash].[ext]`;
          },
        },
      },
    },
    optimizeDeps: {
      include: [
        "vue",
        "vue-router",
        "pinia",
        "axios",
        "@vueuse/core",
        ...optimizeDepsElementPlusIncludes,
      ],
    },

    define: {
      __APP_INFO__: JSON.stringify(__APP_INFO__),
    },
  };
});
